<template>
  <div>
    <!-- <h1>{{stu.stuName}}---{{stu.stuGrade}}---{{stu.stuNumber}}</h1> -->

    <p>已选课程</p>
    <el-table border :data="com" stripe fit style="width: 100%" size="small">
      <!-- <el-table-column prop="stuName" label="学生名" align="center" v-if="true"></el-table-column>
          <el-table-column prop="stuGrade" label="班级" align="center"></el-table-column> -->
      <!-- <el-table-column prop="couNumber" label="课程号" align="center"></el-table-column> -->
      <el-table-column
        prop="course_Name"
        label="课程名"
        align="center"
      ></el-table-column>
      <el-table-column prop="course_img" label="课程图片" align="center">
        <template #default="scope">
          <img :src="scope.row.course_img" class="courseImg-img" alt="" />
        </template>
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="category"
        label="课程类型"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="point"
        label="学分"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="Introduction"
        label="课程介绍"
        align="center"
      ></el-table-column>
    </el-table>
    <p class="p">已选课程总学分:{{ sumcredit }}</p>
    <el-pagination
      v-model:currentPage="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[5, 10, 15, 20, 50]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- <Pagination :currentPage="currentPage4"
     :pageSize="pageSize4" 
     :total="total"
     :handleCurrentChange="handleCurrentChange"
     :handleSizeChange="handleSizeChange">
    </Pagination> -->
  </div>
</template>

<script setup>
import { getToken } from "@/utils/setToken.js";
import { computed, onMounted, reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { Usestucourse } from "@/api/api";
let list = reactive({
  compData: [],
});
let stu = reactive({
  stuName: "",
  stuGrade: "",
  stuNumber: "",
});
const sumcredit = ref();
const currentPage4 = ref(1); //当前页数
const pageSize4 = ref(5); //每页显示条目个数，支持 v-model 双向绑定
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const total = ref(100);
//前端分页功能
const com = computed(() => {
  // 规律slice（  (当前页数-1)*每页条数   ，  当前页数*每页条数  ）
  return list.compData.slice(
    (currentPage4.value - 1) * pageSize4.value,
    currentPage4.value * pageSize4.value
  );
});
//改变每页显示多少条
const handleSizeChange = (val) => {
  pageSize4.value = val;
  currentPage4.value = 1;
  console.log(`每页显示${val}条 `);
};
//改变当前页
const handleCurrentChange = (val) => {
  currentPage4.value = val;
  console.log(`当前页: ${val}`);
};
//获取表格数据
const getinfo = () => {
  let name = useRoute().params.name;
  console.log("学生名", useRoute().params.name);
  Usestucourse({ name: name }).then((res) => {
    console.log(res.data.data, "选课信息");
    console.log(res.data.total, "总数");
    list.compData = res.data.data;
    // stu.stuName=res.data.data[0].stuName//姓名
    stu.stuName = getToken("name"); //姓名
    // stu.stuGrade=res.data.data[0].stuGrade//年级
    // stu.stuNumber=res.data.data[0].stuNumber//学号
    total.value = res.data.total;
    sumcredit.value = res.data.sumcredit;
  });
};
onMounted(() => {
  getinfo();
});
</script>

<style>
 .courseImg-img{
    width: 70px;
    height: 70px;
}
.p{
 text-align: right;
 font-size:16px;
}
</style>